<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/>
<title>我的奖品</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/common.min.css">
<style>
#prize{ 
	padding : 1rem;
}
.flex-between{
  display: flex; 
  justify-content: space-between;
  margin-bottom: 15px;
  background: url("img/my_prize_list.png") no-repeat scroll center 0 / 100% 100%;
}
.done{
	background-image: url(img/my_prize_list_i.png);
}
.get-prize-con{
	/*background : #eeeeee;*/
	display: flex;
	height : 3.25rem;padding: .5rem;
}
.c8{
	color:#888888;
}
.get-prize-con .pic{ 
	margin-right : .5rem; 
	width : 3rem; 
	height : 3rem;
}
.right{ 
	display: flex; 
	width : 23%; 
	align-items: center; 
	justify-content: center; 
	font-size : .85rem; 
	color : #ffffff;
}
.right a{ 
	color : #ffffff;
}
[v-cloak]{
	display: none!important;
}
.nodata{
	text-align: center;
	color: #333333;
	font-size: 16px;
}
</style>
</head>
<body>
	<div id="prize" v-cloak>
		<p class="nodata" v-show="dataList.length==0&&!loading">暂无奖品</p>
		<div class="flex-between item" 
		     v-for="item in dataList"
		     :class="{'done': item.is_exchange == 1}">
			<div class="get-prize-con">
				<div class="pic"><img :src="item.prize.background_image" alt=""></div>
				<div >
					<p class="fz16">{{item.prize.name}}</p>
					<p class="hui999 ">
						有效期 <br>
						{{item.prize.expired_start.split(' ')[0]}}/{{item.prize.expired_end.split(' ')[0]}}
					</p>
				</div>
			</div>
			<div class="right">
				<a @click="exchangePrize(item)" class="btn" v-if="item.is_exchange == 0">兑换</a>
				<a class="btn c8" v-else>已兑换</a>
			</div>
		</div>
	</div>
	<div id="trashcan" style="display: none;"></div>
	<script src="../common/lib/vue.min.js"></script>
	<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
	<script src="../utils/http-service.js"></script>
	<script>
		setFootLink('#trashcan');
		const prize = new Vue({
			el:'#prize',
			mounted: function () {
				var that = this;
				onToast('加载中..');
				$.ajax({
					url: host + '/api/winnings/' + act_id,
					data: {
						uid: uid,
						per_page: 100,
						page: 1
					},
					success: function (res) {
						if (res.code == 200) {
							that.dataList = res.data.data;
							that.loading = false;
							offToast();
						} else {
							Toast(res.message);
						}
					}
				});
			},
			methods: {
				exchangePrize: function (item) {
					var obj = {
						name: item.prize.name,
						img: item.prize.background_image,
						date: item.prize.expired_start.split(' ')[0]+'/'+item.prize.expired_end.split(' ')[0]
					}
					obj = JSON.stringify(obj);
					localStorage.setItem('exchange', obj);
					window.location.href = 'getPrize.html?id='+item.id+'&uid='+uid+'&act_id='+act_id+'&prize_id='+item.prize_id;
				}
			},
			data:{
				dataList: [],
				loading: true
			}
		})
	</script>
</body>
</html>